<template>
  <div class="win">
    <!-- 普通商品 -->
    <div class="normal_goods_box" v-if="type==1">
      <!-- 顶部商品信息栏 -->
      <div class="goods_top_box">
        <div class="banner">
          <swiper
            class="swiper"
            :indicator-dots="true"
            indicator-active-color="#fff"
            :autoplay="true"
            :circular="true"
          >
            <block v-for="(item,index) in goodsData.banner" :key="index">
              <swiper-item>
                <div class="swiper_item">
                  <img class="swiper_item_show" :src="item" mode="widthFix" />
                </div>
              </swiper-item>
            </block>
          </swiper>
        </div>
        <div
          class="present_box"
          v-if="goodsData.present_num!=0&&goodsData.present_num!=''&&goodsData.present_num!=null"
        >
          <div class="grey_bj"></div>
          <p
            class="ellipsis"
          >满{{goodsData.present_num}}件赠送：{{goodsData.name}} x{{goodsData.promotion_num}}</p>
          <div class="grey_bj"></div>
        </div>
        <div class="goods_name_box">
          <button open-type="share"></button>
          <p class="name ellipsis2">{{goodsData.name}}</p>
          <div class="tips_box">
            <p
              :class="ite=='包邮'?'blue':'green'"
              v-for="(ite, l) in goodsData.label"
              :key="l"
            >{{ite}}</p>
          </div>
          <div class="money_box">
            <p class="money">
              ￥
              <span>{{goodsData.sale_price}}</span>
            </p>
            <p class="sales">累计销量：{{goodsData.sale_num}}</p>
          </div>
        </div>
      </div>
      <!-- 申请合作门店享受进货价 -->
      <p class="word_1 title_green" @click="hr_applyTeam" v-if="member_type!=1">申请合作门店享受进货价</p>
      <!-- 使用说明 -->
      <p class="word_2 title_green" @click="hr_courseList(goodsData.pro_id)">查看使用说明</p>
      <!-- 商品参数 -->
      <div class="params_box">
        <p class="title">商品参数:</p>
        <div class="params_bar" v-for="(it, k) in goodsData.note" :key="k">
          <p>{{it}}</p>
        </div>
      </div>
      <!-- 商品详请 -->
      <div class="goods_detail_box">
        <p class="goods_title">商品详情</p>
        <wxParse :content="goodsData.description" />
        <p class="bottom_word">到底了~</p>
      </div>
      <div class="pay_space"></div>
      <div class="pay_box">
        <div class="pay_left_box">
          <div class="collect_box" @click="getCollect">
            <img
              v-if="goodsData.collection_status==1"
              :src="bjurl+'love_logo_act.png'"
              mode="widthFix"
            />
            <img v-else :src="bjurl+'love_logo.png'" mode="widthFix" />
            <p>收藏</p>
          </div>
          <p class="money">
            ￥
            <span>{{goodsData.sale_price}}</span>
          </p>
        </div>
        <div class="btn_box">
          <button class="shop_car" @click="getAddShopCar">加入购物车</button>
          <button class="pay" v-if="disabled" @click="hr_orderConfirm('pro',goodsData.pro_id)">立即购买</button>
          <button class="pay" v-else>立即购买</button>
          <!-- <button class="pay" :v-intervalclick='{func:hr_orderConfirm('intpro',goodsData.intpro_id),time:5000,}'>立即购买</button> -->
        </div>
      </div>
    </div>
    <!-- 积分商品 -->
    <div class="normal_goods_box" v-if="type==2">
      <!-- 顶部商品信息栏 -->
      <div class="goods_top_box">
        <div class="banner">
          <swiper
            class="swiper"
            :indicator-dots="true"
            indicator-active-color="#fff"
            :autoplay="true"
            :circular="true"
          >
            <block v-for="(item,j) in goodsData.banner" :key="j">
              <swiper-item>
                <div class="swiper_item">
                  <img class="swiper_item_show" :src="item" mode="widthFix" />
                </div>
              </swiper-item>
            </block>
          </swiper>
        </div>
        <div class="goods_name_box">
          <button open-type="share"></button>
          <p class="name ellipsis2">{{goodsData.name}}</p>
          <div class="tips_box">
            <p
              :class="ite=='包邮'?'blue':'green'"
              v-for="(ite, n) in goodsData.label"
              :key="n"
            >{{ite}}</p>
          </div>
          <div class="money_box">
            <p class="money">
              <span>{{goodsData.convert_intergal}}积分</span>
            </p>
            <p class="sales">销量：{{goodsData.sale_num}}</p>
          </div>
        </div>
      </div>
      <!-- 商品参数 -->
      <div class="params_box">
        <p class="title">商品参数:</p>
        <div class="params_bar" v-for="(it, k) in goodsData.note" :key="k">
          <p>{{it}}</p>
        </div>
      </div>
      <!-- 商品详请 -->
      <div class="goods_detail_box">
        <p class="goods_title">商品详情</p>

        <wxParse :content="goodsData.description" />
        <p class="bottom_word">到底了~</p>
      </div>
      <div class="exchange_space"></div>
      <div class="exchange_box">
        <div class="collect_box" @click="getCollectIntegral">
          <img
            v-if="goodsData.collection_status==1"
            :src="bjurl+'love_logo_act.png'"
            mode="widthFix"
          />
          <img v-else :src="bjurl+'love_logo.png'" mode="widthFix" />
          <p>收藏</p>
        </div>
        <button @click="onIntegralPopup">立即兑换</button>
      </div>
    </div>
    <!-- 立即兑换弹窗 -->
    <div class="popup" v-if="integralShow" catchtouchmove="ture">
      <div class="popup_box">
        <div class="top_box">
          <p class="list_top">兑换确认</p>
          <p>您确定消耗{{goodsData.convert_intergal}}积分兑该商品</p>
        </div>
        <div class="bottom_box">
          <button v-if="disabled" @click="hr_orderConfirm('intpro',goodsData.intpro_id)">立即兑换</button>
          <button v-else>立即兑换</button>
          <p @click="offIntegralPopup">暂不兑换</p>
        </div>
        <!-- <img @click="offIntegralPopup" v-if="bjurl" :src="bjurl+'close_logo.png'" /> -->
      </div>
    </div>
    <i-toast id="toast" />
  </div>
</template>

<script>
import wxParse from "mpvue-wxparse";
export default {
  data() {
    return {
      disabled: true, //按钮方式多次点击
      type: 1, //1是普通商品,2是积分商品
      bjurl: "",
      pro_id: 0, //正常商品ID
      intpro_id: 0, //积分商品ID
      order_id: 0, //订单ID
      order_number: 0, //订单号
      coll: 0, //订单号
      goodsData: [],
      integralShow: false,
      member_type: ""
    };
  },
  methods: {
    //
    initData(callback) {
      let member_id = wx.getStorageSync("member_id");
      if (member_id == "") {
        this.$bus.$on("getMemberInfo", () => {
          callback();
        });
        this.$forceUpdate();
      } else {
        callback();
        this.$forceUpdate();
      }
    },
    //请求接口加入购物车
    getAddShopCar() {
      this.$ajax("/home/Shopcar/addShopcar", "post", {
        pro_id: this.goodsData.pro_id,
        num: 1,
        price: this.goodsData.sale_price,
        type: this.goodsData.active_status
      })
        .then(res => {
          if (res.status) {
            this.$toast({
              content: "加入成功~"
            });
          } else {
            this.$toast({
              content: "该商品已在购物车里了~"
            });
          }
        })
        .catch(err => {});
    },
    //请求接口商品详情
    getGoodsDetail() {
      if (this.type == 1) {
        this.$ajax("/home/Home/proDetail", "post", {
          pro_id: this.pro_id
        })
          .then(res => {
            if (res.status) {
              this.goodsData = res.data;
            } else {
            }
          })
          .catch(err => {});
      }
    },
    //请求接口积分商品详情
    getIntegralDetail() {
      if (this.type == 2) {
        this.$ajax("/home/integral/integral_detail", "post", {
          intpro_id: this.intpro_id
        })
          .then(res => {
            if (res.status) {
              this.goodsData = res.data;
            } else {
            }
          })
          .catch(err => {});
      }
    },
    //请求接口点击进行收藏和取消操作(正常商品)
    getCollect() {
      this.$ajax("/home/mine/coll", "post", {
        type: 1,
        pro_id: this.pro_id
      })
        .then(res => {
          if (res.status) {
            this.goodsData.collection_status = res.collection;
            if (this.goodsData.collection_status == 1) {
              this.$toast({
                content: "收藏成功~"
              });
            } else {
              this.$toast({
                content: "取消成功~"
              });
            }
            this.$forceUpdate();
          } else {
          }
        })
        .catch(err => {});
      // this.getGoodsDetail();
    },
    //请求接口点击进行收藏和取消操作(积分商品)
    getCollectIntegral() {
      this.$ajax("/home/mine/coll", "post", {
        type: 2,
        pro_id: this.intpro_id
      })
        .then(res => {
          if (res.status) {
            this.goodsData.collection_status = res.collection;
            if (this.goodsData.collection_status == 1) {
              this.$toast({
                content: "收藏成功~"
              });
            } else {
              this.$toast({
                content: "取消成功~"
              });
            }
            this.$forceUpdate();
          } else {
          }
        })
        .catch(err => {});
      // this.getGoodsDetail();
    },
    // 请求确认订单
    // 打开立即兑换弹窗
    onIntegralPopup() {
      let phone = wx.getStorageSync("phone");
      if (phone == "" || phone == null || phone == undefined) {
        return this.$toast({
          content: "请登录再购买~"
        });
      }
      this.integralShow = true;
    },
    // 关闭立即兑换弹窗
    offIntegralPopup() {
      this.integralShow = false;
    },
    //跳转到课堂列表
    hr_courseList(pro_id) {
      this.$ajax("/home/course/index", "post", {
        mark: 1,
        pro_id: pro_id
      })
        .then(res => {
          if (res.status) {
            wx.navigateTo({
              url: "../courseList/main?pro_id=" + pro_id + "&type=" + 1
            });
          } else {
            return this.$toast({
              content: "暂无使用说明"
            });
          }
        })
        .catch(err => {});
    },
    //跳转到申请门店合作
    hr_applyTeam() {
      wx.navigateTo({
        url: "../applyTeam/main"
      });
    },
    //跳转到订单确认页
    hr_orderConfirm(pro_type, id) {
      this.disabled = false;
      let phone = wx.getStorageSync("phone");
      if (phone == "" || phone == null || phone == undefined) {
        this.disabled = true;
        return this.$toast({
          content: "请登录再购买~"
        });
      }
      wx.requestSubscribeMessage({
        tmplIds: ["mrkEMkHADmpaQpF-nOKwSBtV5E0LmD4mf33RXzQ3mKQ"],
        success: re => {
          this.$ajax("/home/order/getcheckOrder", "post", {
            pro_type: pro_type,
            type: this.goodsData.active_status,
            order: [
              {
                pro_id: id,
                num: 1,
                price: this.goodsData.sale_price,
                integral: this.goodsData.convert_intergal
              }
            ]
          })
            .then(res => {
              if (res.status == false) {
                this.disabled = true;
                return this.$toast({
                  content: res.msg
                });
              }
              if (pro_type == "pro") {
                this.order_id = res.data.order_id;
                this.order_number = res.data.order_number;
                wx.navigateTo({
                  url:
                    "../orderConfirm/main?order_id=" +
                    this.order_id +
                    "&order_number=" +
                    this.order_number +
                    "&type=" +
                    this.active_status
                });
              } else {
                this.disabled = true;
                if (res.status) {
                  this.integralShow = false;
                  this.$toast({
                    content: "兑换成功~"
                  });
                } else
                  this.$toast({
                    content: res.msg
                  });
              }
            })
            .catch(err => {});
        },
        fail: err => {
          this.$ajax("/home/order/getcheckOrder", "post", {
            pro_type: pro_type,
            type: this.goodsData.active_status,
            order: [
              {
                pro_id: id,
                num: 1,
                price: this.goodsData.sale_price,
                integral: this.goodsData.convert_intergal
              }
            ]
          })
            .then(res => {
              if (res.status == false) {
                this.disabled = true;
                return this.$toast({
                  content: res.msg
                });
              }
              if (pro_type == "pro") {
                this.order_id = res.data.order_id;
                this.order_number = res.data.order_number;
                wx.navigateTo({
                  url:
                    "../orderConfirm/main?order_id=" +
                    this.order_id +
                    "&order_number=" +
                    this.order_number +
                    "&type=" +
                    this.active_status
                });
              } else {
                this.disabled = true;
                if (res.status) {
                  this.integralShow = false;
                  this.$toast({
                    content: "兑换成功~"
                  });
                } else
                  this.$toast({
                    content: res.msg
                  });
              }
            })
            .catch(err => {});
        }
      });
    }
  },
  components: {
    wxParse
  },
  onShow() {
    this.disabled = true;
  },
  onLoad(e) {
    Object.assign(this.$data, this.$options.data());
    this.initData(() => {
      this.pro_id = e.pro_id;
      this.intpro_id = e.intpro_id;
      this.type = e.type;
      this.bjurl = this.$bjurl;
      this.member_type = wx.getStorageSync("member_type");
      this.getGoodsDetail();
      this.getIntegralDetail();
      this.$forceUpdate();
    });
  }
};
</script>
<style lang="scss" scoped>
@import url("~mpvue-wxparse/src/wxParse.css");
.win {
  .goods_top_box {
    background-color: #ffffff;
    .banner {
      height: 750rpx;
      position: relative;
      .swiper {
        height: 750rpx;
        .swiper_item {
          height: 750rpx;
          .swiper_item_show {
            margin: 0 auto;
            height: 750rpx;
            width: 750rpx;
            overflow: hidden;
          }
        }
      }
    }
    .present_box {
      p {
        color: #333333;
        width: 710rpx;
        height: 88rpx;
        box-sizing: border-box;
        padding-left: 30rpx;
        line-height: 88rpx;
      }
      .grey_bj {
        height: 20rpx;
        background-color: #f3f3f3;
      }
    }
    .goods_name_box {
      box-sizing: border-box;
      padding: 20rpx 30rpx 20rpx;
      position: relative;
      button {
        position: absolute;
        right: 0;
        top: 38rpx;
        width: 135rpx;
        height: 60rpx;
        border-radius: 30rpx 0 0 30rpx;
        background-image: url($bjurl+"share_bj.png");
        background-size: 100% 100%;
      }
      .name {
        padding: 0 0 15rpx 0;
        width: 560rpx;
        font-size: 30rpx;
        color: #333333;
        line-height: 1.2;
      }
      .tips_box {
        display: flex;
        p {
          padding: 6rpx 10rpx 7rpx;
          font-size: 20rpx;
          border-radius: 20rpx;
          margin-right: 10rpx;
        }
        .blue {
          color: #6da9ff;
          background-color: #deebff;
          border-radius: 15rpx;
          margin-right: 10rpx;
        }
        .green {
          color: #ffffff;
          background-color: $green;
        }
      }
      .money_box {
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        .money {
          margin-top: 20rpx;
          color: $red;
          font-size: 34rpx;
          span {
            font-size: 48rpx;
          }
        }
        .sales {
          font-size: 26rpx;
          color: #7c7c7c;
        }
      }
    }
  }
  .title_green {
    width: 750rpx;
    height: 88rpx;
    line-height: 88rpx;
    text-align: center;
    color: $green;
    background-color: #ffffff;
    margin-top: 20rpx;
    font-size: 30rpx;
    text-decoration: underline;
  }
  .word_1 {
    font-weight: 400;
  }
  .word_2 {
    font-weight: 500;
  }
  .params_box {
    margin-top: 20rpx;
    background-color: #ffffff;
    padding: 20rpx 44rpx 16rpx;
    .title {
      font-size: 28rpx;
      color: #4d4d4d;
      margin-bottom: 10rpx;
    }
    .params_bar {
      padding-left: 56rpx;
      p {
        color: #999999;
        font-size: 26rpx;
        line-height: 1.6;
      }
    }
  }
  .goods_detail_box {
    margin-top: 20rpx;
    background-color: #ffffff;
    padding: 0 30rpx 34rpx;
    .goods_title {
      color: #4d4d4d;
      font-size: 36rpx;
      text-align: center;
      line-height: 90rpx;
      height: 90rpx;
    }
    .detail_word {
      margin-top: 50rpx;
      text-indent: 50rpx;
      font-size: 26rpx;
      color: #323232;
      line-height: 1.9;
      padding: 0 30rpx;
    }
    .bottom_word {
      margin-top: 60rpx;
      text-align: center;
      color: #999999;
      font-size: 28rpx;
    }
  }
  .pay_space {
    height: 118rpx;
  }
  .pay_box {
    box-shadow: -1rpx -7rpx 8rpx 0rpx rgba(169, 169, 169, 0.14);
    background-color: #ffffff;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-left: 30rpx;
    .pay_left_box {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .collect_box {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-right: 20rpx;
        font-size: 24rpx;
        color: #999999;
        img {
          width: 39rpx;
          margin-bottom: 10rpx;
        }
      }
      .money {
        color: $red;
        font-size: 30rpx;
        span {
          font-size: 42rpx;
        }
      }
    }
    .btn_box {
      color: #ffffff;
      font-size: 28rpx;
      letter-spacing: 2rpx;
      display: flex;
      .shop_car {
        font-size: 30rpx;
        color: #ffffff;
        line-height: 98rpx;
        border-radius: 0rpx;
        width: 210rpx;
        height: 98rpx;
        background: linear-gradient(
          -9deg,
          rgba(255, 156, 0, 1),
          rgba(253, 232, 114, 1)
        );
      }
      .pay {
        font-size: 30rpx;
        color: #ffffff;
        line-height: 98rpx;
        border-radius: 0rpx;
        width: 208rpx;
        height: 98rpx;
        background: linear-gradient(
          0deg,
          rgba(11, 208, 94, 1),
          rgba(11, 208, 173, 1)
        );
      }
    }
  }
  .exchange_space {
    height: 150rpx;
  }
  .exchange_box {
    box-shadow: -1rpx -7rpx 8rpx 0rpx rgba(169, 169, 169, 0.14);
    height: 98rpx;
    box-sizing: border-box;
    padding: 0 30rpx 0 45rpx;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #ffffff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .collect_box {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-right: 20rpx;
      font-size: 24rpx;
      color: #999999;
      img {
        width: 39rpx;
        margin-bottom: 10rpx;
      }
    }
    button {
      font-size: 36rpx;
      line-height: 70rpx;
      width: 582rpx;
      color: #ffffff;
      letter-spacing: 8rpx;
      height: 70rpx;
      border-radius: 46rpx;
      background: linear-gradient(
        0deg,
        rgba(11, 208, 94, 1),
        rgba(11, 208, 173, 1)
      );
    }
  }
  .popup_box {
    text-align: center;
    width: 481rpx;
    height: 467rpx;
    background-image: url($bjurl+"integral_popup.png");
    background-size: 100% 100%;
    box-sizing: border-box;
    padding: 44rpx 0 40rpx 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    position: relative;
    img {
      position: absolute;
      bottom: -150rpx;
      width: 54rpx;
      height: 54rpx;
    }
    .top_box {
      color: #ffffff;
      font-size: 24rpx;
      .list_top {
        margin-bottom: 38rpx;
        font-size: 38rpx;
      }
    }
    .bottom_box {
      button {
        color: #ffffff;
        font-size: 34rpx;
        letter-spacing: 3rpx;
        margin-bottom: 40rpx;
        width: 320rpx;
        height: 64rpx;
        line-height: 64rpx;
        background-image: url($bjurl+"integral_btn.png");
        background-size: 100% 100%;
        border-radius: 32rpx;
        box-shadow: 0rpx 5rpx 5rpx 0rpx rgba(136, 136, 136, 0.25);
      }
      p {
        color: #999999;
        font-size: 26rpx;
        text-decoration: underline;
      }
    }
  }
}
</style>
